<template>
  <!-- Footer Begin -->
  <div class="flex flex-col flex-items-center max-w-1920px">
    <div class="w-100% flex flex-justify-center flex-wrap m-b-60px m-t-10px">
      <el-image
        :src="footerFirstUrl"
        fit="cover"
        class="w-16.66667% <md:w-33.33337% h-auto hover:opacity-70 transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <div class="w-16.66667% <md:w-33.33337% h-auto">
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </div>
        </template>
      </el-image>
      <el-image
        :src="footerTwoUrl"
        fit="cover"
        class="w-16.66667% <md:w-33.33337% h-auto hover:opacity-70 transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <div class="w-16.66667% <md:w-33.33337% h-auto">
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </div>
        </template>
      </el-image>
      <el-image
        :src="footerThreeUrl"
        fit="cover"
        class="w-16.66667% <md:w-33.33337% h-auto hover:opacity-70 transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <div class="w-16.66667% <md:w-33.33337% h-auto">
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </div>
        </template>
      </el-image>
      <el-image
        :src="footerFiveUrl"
        fit="cover"
        class="w-16.66667% <md:w-33.33337% h-auto hover:opacity-70 transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <div class="w-16.66667% <md:w-33.33337% h-auto">
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </div>
        </template>
      </el-image>
      <el-image
        :src="footerSixUrl"
        fit="cover"
        class="w-16.66667% <md:w-33.33337% h-auto hover:opacity-70 transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <div class="w-16.66667% <md:w-33.33337% h-auto">
            <el-image :src="errorUrl" fit="contain" class="w-100% <md:w-33.33337% h-100%"></el-image>
          </div>
        </template>
      </el-image>
      <el-image
        :src="footerSevenUrl"
        fit="cover"
        class="w-16.66667% <md:w-33.33337% h-auto hover:opacity-70 transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <div class="w-16.66667% <md:w-33.33337% h-auto">
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </div>
        </template>
      </el-image>
    </div>
    <!-- 博客标签 -->
    <div class="h-120px p-b-20px flex flex-justify-center flex-items-center flex-wrap">
      <div
        class="w-200px flex flex-justify-between text-14px text-#000 dark:text-#D8D8D8 font-500"
        style="font-family: &quot;Open Sans&quot;, sans-serif"
      >
        <div
          class="capitalize hover:text-[--el-color-primary] transition-all duration-600 transition-ease"
          @click="handleHomePage"
        >
          Lifestyle
        </div>
        <div
          class="capitalize hover:text-[--el-color-primary] transition-all duration-600 transition-ease"
          @click="handleHomePage"
        >
          Contact
        </div>
        <div
          class="capitalize hover:text-[--el-color-primary] transition-all duration-600 transition-ease"
          @click="handleHomePage"
        >
          Home
        </div>
      </div>
      <!-- Logo -->
      <div class="p-l-86px p-r-60px <sm:p-x-0">
        <el-image :src="logoUrl" fit="cover" class="max-w-350px h-100px">
          <template #error>
            <el-image :src="errorUrl" fit="cover" class="max-w-350px h-100px"></el-image>
          </template>
        </el-image>
      </div>
      <!-- 联系方式 -->
      <div class="w-200px flex flex-justify-center">
        <div class="flex flex-items-center flex-justify-between w-140px">
          <el-tooltip effect="light">
            <template #content>
              <div class="w-150px h-150px">
                <el-image :src="qqUrl" fit="cover" class="w-150px h-150px">
                  <template #error>
                    <el-image :src="errorUrl" fit="contain" class="w-150px h-150px"></el-image>
                  </template>
                </el-image>
              </div>
            </template>
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center transition-all duration-600 transition-ease"
            >
              <KoiSvgIcon name="koi-qq" width="20" height="20"></KoiSvgIcon>
            </div>
          </el-tooltip>
          <el-tooltip effect="light">
            <template #content>
              <div class="w-150px h-150px">
                <el-image :src="weixinUrl" fit="cover" class="w-150px h-150px">
                  <template #error>
                    <el-image :src="errorUrl" fit="contain" class="w-150px h-150px"></el-image>
                  </template>
                </el-image>
              </div>
            </template>
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center transition-all duration-600 transition-ease"
            >
              <KoiSvgIcon name="koi-weixin" width="20" height="20"></KoiSvgIcon>
            </div>
          </el-tooltip>
          <el-tooltip content="网易云" effect="light">
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center transition-all duration-600 transition-ease"
              @click="handleWyyUrl"
            >
              <KoiSvgIcon name="koi-wyy" width="20" height="20"></KoiSvgIcon>
            </div>
          </el-tooltip>
          <el-tooltip content="管理平台" effect="light">
            <div
              class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center transition-all duration-600 transition-ease"
              @click="handlePCUrl"
            >
              <KoiSvgIcon name="koi-pc" width="16" height="16"></KoiSvgIcon>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div class="flex flex-justify-center p-y-20px text-14px m-t-20px tracking-0px">
      <div class="text-#000 dark:text-#D8D8D8">© Copyright {{ new Date().getFullYear() }}</div>
      <div class="text-[--el-color-primary] m-x-6px">『于心博客』</div>
      <div class="text-#000 dark:text-#D8D8D8">All rights reserved.</div>
    </div>
  </div>
  <!-- Footer End -->
</template>

<script setup lang="ts">
import errorUrl from "@/assets/images/error/404.png";
import logoUrl from "@/assets/images/logo/logo.png";
import footerFirstUrl from "@/assets/images/blog/footer/f1.jpg";
import footerTwoUrl from "@/assets/images/blog/footer/f2.jpg";
import footerThreeUrl from "@/assets/images/blog/footer/f3.jpg";
import footerFiveUrl from "@/assets/images/blog/footer/f5.jpg";
import footerSixUrl from "@/assets/images/blog/footer/f6.jpg";
import footerSevenUrl from "@/assets/images/blog/footer/f7.jpg";
import { useRouter } from "vue-router";
import { HOME_URL } from "@/config/index.ts";

const router = useRouter();
const qqUrl = "https://picx.zhimg.com/80/v2-c7b2173572c3f71a9dae4f6896fd168d_720w.webp";
const weixinUrl = "https://pic2.zhimg.com/80/v2-455f78af11d6088d6ff71ece430a74c7_720w.webp";

/** 网易云 */
const handleWyyUrl = () => {
  window.open("https://music.163.com", "_blank");
};

/** 后台管理 */
const handlePCUrl = () => {
  window.open("http://117.72.208.215/login", "_blank");
};

/** 跳转首页 */
const handleHomePage = () => {
  router.push({ path: HOME_URL });
};
</script>

<style scoped></style>
